import React, { useEffect, useRef, useState } from 'react';
import { Tabs, Swiper, NavBar, Toast } from 'antd-mobile';
import styles from './index.less';
import { SwiperRef } from 'antd-mobile/es/components/swiper';

const tabItems = [
  { key: 'eval', title: '待评价' },
  { key: 'uneval', title: '已评价/追评' },
];

export default function Comment() {
  const swiperRef = useRef<SwiperRef>(null);
  const [activeIndex, setActiveIndex] = useState(1);
  const back = () =>
    Toast.show({
      content: '点击了返回区域',
      duration: 1000,
    });
  // 是否评价星级
  const handler = (e) => {
    try {
      for (let index = 0; index <= 4; index++) {
        e.target.parentNode.children[index].style.color = '';
      }
      for (let index = 0; index <= e.target.id.slice(-1) * 1 - 1; index++) {
        e.target.parentNode.children[index].style.color = 'red';
      }
    } catch (err) {
      console.log(err);
    }
  };
  return (
    <div>
      <NavBar onBack={back}>评价中心</NavBar>
      <Tabs
        activeKey={tabItems[activeIndex].key}
        onChange={(key) => {
          const index = tabItems.findIndex((item) => item.key === key);
          setActiveIndex(index);
          swiperRef.current?.swipeTo(index);
        }}
      >
        {tabItems.map((item) => (
          <Tabs.Tab title={item.title} key={item.key} />
        ))}
      </Tabs>
      <Swiper
        direction="horizontal"
        loop
        indicator={() => null}
        ref={swiperRef}
        defaultIndex={activeIndex}
        onIndexChange={(index) => {
          setActiveIndex(index);
        }}
      >
        <Swiper.Item>
          <div className={styles.content}>
            <div className={styles.content1}>
              <img src="" alt="" />
              <div className={styles.content11}>
                <p>九阳全自动面条机 省时省力 居家生活</p>
                <span>评价</span>
              </div>
            </div>
          </div>
        </Swiper.Item>
        <Swiper.Item>
          <div className={styles.content}>
            <div className={styles.content1}>
              <img src="" alt="" />
              <div className={styles.content11}>
                <p>九阳全自动面条机 省时省力 居家生活</p>
                <label>
                  评分
                  <ul
                    onClick={(e) => {
                      handler(e);
                    }}
                  >
                    <li id="service1">★</li>
                    <li id="service2">★</li>
                    <li id="service3">★</li>
                    <li id="service4">★</li>
                    <li id="service5">★</li>
                  </ul>
                </label>
              </div>
            </div>
            <p className={styles.p}>牛肉很新鲜，物流很快</p>
            <span className={styles.ps}>追评</span>
          </div>
        </Swiper.Item>
      </Swiper>
    </div>
  );
}
